<template>
  <div>
    <NormalForm :btnNormalRule="btnNormalRule" :enumOpt="enumOpt" :formList="formList" :operateForm="queryForm"
                pageTitle="客户标签" @handleQuery="handleQuery" @handleReset="handleReset"
    ></NormalForm>
    <div class="g-card" style="padding: 0 20px 20px 20px">
      <div class="right-btn" style="margin-right: 0">
        <el-button v-hasPermi="['admin:customerTagRule:createTagRule']" type="primary"
                   @click="createClick"
        >创建标签
        </el-button>
      </div>
      <el-table v-loading="loading" :data="tableList" :header-cell-style="{ background: '#F8F8F8', color: '#1D1D1D', height: '40px', textAlign: 'center' }" :row-style="{ height: '40px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }"
                :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" height="415"
                row-key="id"
                style="width: 100%"
      >
        <el-table-column label="全部标签" min-width="180" prop="groupName">
          <template slot-scope="scope">
            <el-button v-if="scope.row.mainId"
                       icon="el-icon-price-tag" type="text"
                       @click="$router.push({ name: 'LabelDetail', query: { mainId: scope.row.mainId } })"
            >{{ scope.row.groupName || scope.row.tagGroupName }}
            </el-button>
            <span v-else>{{ scope.row.groupName || scope.row.tagGroupName }}</span>

            <!-- <i class="el-icon-price-tag"></i>
            <span style="margin-left: 10px">{{ scope.row.groupName || scope.row.tagGroupName }}</span> -->
          </template>
        </el-table-column>
        <el-table-column align="center" label="标签数据类型" prop="tagDataType" width="100"></el-table-column>
        <el-table-column align="center" label="标签覆盖人数" prop="tagPeople" width="100"></el-table-column>
        <el-table-column align="center" label="标签值" prop="tagLayName" width="200"></el-table-column>
        <el-table-column align="center" label="计算状态" prop="computeState" width="100">
          <template slot-scope="scope">
            <span>{{ countStateOpt[scope.row.computeState] }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="更新方式" prop="updateType" width="100">
          <template slot-scope="scope">
            <span>{{ updateTypeOpt[scope.row.updateType] }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="标签状态" prop="tagState" width="100">
          <template slot-scope="scope">
            <span>{{ labelStateOpt[scope.row.tagState] }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="创建方式" prop="createType" width="100">
          <template slot-scope="scope">
            <span>{{ createTypeOpt[scope.row.createType] }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="创建者" prop="createBy" width="100"></el-table-column>
        <el-table-column align="center" label="创建时间" prop="createTime" width="150"></el-table-column>
        <el-table-column align="center" fixed="right" label="操作" width="200">
          <template slot-scope="scope">
            <el-button v-hasPermi="['admin:customerTagRule:updateTagRule']" :disabled="!scope.row.sub" size="mini" type="text"
                       @click="toEdit(scope.row)"
            >编辑
            </el-button>
            <el-button v-hasPermi="['admin:customerTagRule:removeTagRule']" :disabled="!scope.row.sub" size="mini" type="text"
                       @click="toDel(scope.row)"
            >删除
            </el-button>
            <el-button v-hasPermi="['admin:customerTagRule:calculateTagRule']" :disabled="!scope.row.sub || scope.row.updateType == 1" size="mini"
                       type="text"
                       @click="updateTag(scope.row)"
            >更新
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <!-- <NormalPagination :currentPage="queryForm.pageNum" :pageSize="queryForm.pageSize" :total="total" @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange"></NormalPagination> -->
    </div>
    <el-dialog :visible.sync="dialogFormVisible" title="请选择标签类型" width="750px">
      <div class="choose-con">
        <div class="item" @click="to(0)">
          <div class="img">
            <img alt="" height="75" src="../../../assets/image/tag_bg1.png" width="74"/>
          </div>
          <p class="title">基础属性</p>
        </div>
        <div class="item" @click="to(1)">
          <div class="img">
            <img alt="" height="75" src="../../../assets/image/tag_bg2.png" width="74"/>
          </div>
          <p class="title">首末次特征</p>
        </div>
        <div class="item" @click="to(3)">
          <div class="img">
            <img alt="" height="75" src="../../../assets/image/tag_bg1.png" width="74"/>
          </div>
          <p class="title">行为分布结果</p>
        </div>
        <div class="item" @click="to(2)">
          <div class="img">
            <img alt="" height="75" src="../../../assets/image/tag_bg2.png" width="74"/>
          </div>
          <p class="title">事件偏好属性</p>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { caculation, deleteTag, tagTableList } from '@/api/customer/label'
import { permission } from '@/api/communityOperating/personalSop'

export default {
  data() {
    return {
      btnNormalRule: ['admin:customerTagRule:queryTagRule'],
      queryForm: {
        tagName: '',
        tagDataType: '',
        computeState: '',
        updateType: '',
        tagState: '',
        createType: '',
        createBy: ''
        // pageNum: 1,
        // pageSize: 20,
      },
      formList: [
        {
          label: '标签名称',
          value: '',
          prop: 'tagName',
          type: 'INPUT',
          emunName: ''
        },
        {
          label: '数据类型',
          value: '',
          prop: 'tagDataType',
          type: 'SELECT',
          emunName: 'sourceTypeList'
        },
        {
          label: '计算状态',
          value: '',
          prop: 'computeState',
          type: 'SELECT',
          emunName: 'countStateList'
        },
        {
          label: '更新方式',
          value: '',
          prop: 'updateType',
          type: 'SELECT',
          emunName: 'updateTypeList'
        },
        {
          label: '标签状态',
          value: '',
          prop: 'tagState',
          type: 'SELECT',
          emunName: 'labelStateList'
        },
        {
          label: '创建方式',
          value: '',
          prop: 'createType',
          type: 'SELECT',
          emunName: 'createTypeList'
        },
        {
          label: '创建者',
          value: '',
          prop: 'createBy',
          type: 'SELECT',
          emunName: 'creatorList'
        }
      ],
      enumOpt: {
        sourceTypeList: [
          { dictLabel: '字符串', dictValue: 'STRING' },
          { dictLabel: '数值', dictValue: 'NUMBER' },
          { dictLabel: '日期', dictValue: 'DATETIME' },
          { dictLabel: '布尔', dictValue: 'BOOLEAN' }
        ],
        countStateList: [
          { dictLabel: '新创建', dictValue: 'NEW' },
          { dictLabel: '等待计算', dictValue: 'WAIT' },
          { dictLabel: '计算失败', dictValue: 'FAILED' },
          { dictLabel: '计算成功', dictValue: 'SUCCEED' },
          { dictLabel: '计算中', dictValue: 'RUNNING' },
          { dictLabel: '延迟计算', dictValue: 'DELAY' }
        ],
        updateTypeList: [
          { dictLabel: '例行', dictValue: '1' },
          { dictLabel: '手动', dictValue: '2' }
        ],
        labelStateList: [
          { dictLabel: '正常运行', dictValue: 'NORMAL' },
          { dictLabel: '已暂停', dictValue: 'STOPPED' }
        ],
        createTypeList: [
          { dictLabel: '规则创建', dictValue: '1' },
          { dictLabel: '导入创建', dictValue: '2' }
        ],
        creatorList: []
      },
      sourceTypeOpt: { 'STRING': '字符串', 'NUMBER': '数值', 'DATETIME': '日期', 'BOOLEAN': '布尔' },
      countStateOpt: {
        'NEW': '新创建',
        'WAIT': '等待计算',
        'FAILED': '计算失败',
        'SUCCEED': '计算成功',
        'RUNNING': '计算中',
        'DELAY': '延迟计算'
      },
      updateTypeOpt: { 1: '例行', 2: '手动' },
      labelStateOpt: { 'NORMAL': '正常运行', 'STOPPED': '已暂停' },
      createTypeOpt: { 1: '规则创建', 2: '导入创建' },
      loading: false,
      total: 0,
      tableList: [],
      dialogFormVisible: false,
      formLabelWidth: '120px'
    }
  },
  created() {
    this.getUserList()
    this.handleQuery()
  },
  methods: {
    tagTableListFn() {
      this.loading = true
      tagTableList({ ...this.queryForm }).then(res => {
        if (res.code === 200) {
          const { data } = res
          this.loading = false
          this.tableList = data.map(item => {
            return {
              id: item.groupCode,
              groupName: item.groupName,
              main: true,
              children: item.tagMainList ? item.tagMainList.map(itm => {
                return {
                  mainId: itm.mainId,
                  id: itm.mainId,
                  tagGroupName: itm.tagName,
                  tagLayName: itm.tagLayName,
                  tagDataType: itm.tagDataType,
                  tagPeople: itm.tagPeople,
                  tagColumn: itm.tagColumn,
                  computeState: itm.computeState,
                  updateType: itm.updateType,
                  tagState: itm.tagState,
                  createType: itm.createType,
                  createBy: itm.createBy,
                  createTime: itm.createTime,
                  tagType: itm.tagType,
                  sub: true,
                  children: itm.tagSubList?.map(i => {
                    return {
                      id: i.subId,
                      tagGroupName: i.tagLayName,
                      tagPeople: i.tagPeople,
                      createBy: i.createBy,
                      createTime: i.createTime,
                      third: true
                    }
                  })
                }
              }) : []
            }
          })
        }
      })
    },
    getUserList() {
      permission({ authFlag: 'Y', deptId: null, name: '' }).then(res => {
        if (res.code === 200) {
          res.data.forEach(item => {
            this.enumOpt.creatorList.push({
              dictLabel: item.userName,
              dictValue: item.userId
            })
          })
        }
      })
    },
    handleQuery() {
      this.queryForm.pageNum = 1
      this.tagTableListFn()
    },
    handleReset() {
      this.queryForm = {
        tagName: '',
        tagDataType: '',
        computeState: '',
        updateType: '',
        tagState: '',
        createType: '',
        createBy: ''
        // pageNum: 1,
        // pageSize: 20,
      }
      this.handleQuery()
    },
    // 翻页
    // handleSizeChange(val) {
    //   this.queryForm.pageNum = 1
    //   this.queryForm.pageSize = val
    //   this.tagTableListFn()
    // },
    // handleCurrentChange(val) {
    //   this.queryForm.pageNum = val
    //   this.tagTableListFn()
    // },
    toDel({ id, tagGroupName }) {
      this.$confirm(`是否删除${tagGroupName}标签？`, '提示', {
        confirmButtonText: '确定',
        type: 'warning'
      }).then(() => {
        deleteTag({ id }).then(res => {
          if (res.code === 200) {
            this.$message.success(res.data)
            this.search()
          }
        })
      })
    },
    updateTag({ id, tagGroupName }) {
      this.$confirm(`是否更新${tagGroupName}标签？`, '提示', {
        confirmButtonText: '确定',
        type: 'warning'
      }).then(() => {
        caculation({ mainId: id }).then(res => {
          if (res.code === 200) {
            this.$message.success('更新成功！')
          }
        })
      })
    },
    pageChange({ page, limit }) {
      this.pageNum = page
      this.pageSize = limit
    },
    createClick() {
      this.dialogFormVisible = true
    },
    to(tagType) {
      this.$router.push({
        name: 'LabelEdit',
        query: {
          tagType
        }
      })
    },
    toEdit({ id }) {
      this.$router.push({
        name: 'LabelEdit',
        query: { id }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
@import "../../../styles/base.scss";

.choose-con {
  display: flex;
  justify-content: space-around;

  .item {
    position: relative;
    width: 128px;
    height: 140px;
    border: 1px solid #eee;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;

    .img {
      // position: absolute;
      // top: 10px;
      // left: 50%;
      // transform: translateX(-50%);
      width: 74px;
      border: 1px dashed #ccc;
    }

    .title {
      // text-align: center;
      // position: absolute;
      // bottom: 10px;
      // left: 50%;
      // transform: translateX(-50%);
      // color: #333;
    }

    &:hover {
      border-color: #082aff;

      .title {
        color: #082aff;
      }
    }

  }
}

::v-deep .el-table th.el-table__cell.is-leaf,
.el-table td.el-table__cell {
  border-bottom: none !important;
}

::v-deep .el-table .el-table__header-wrapper th {
  background-color: #f8f8f9 !important;
}

::v-deep.el-autocomplete {
  position: absolute;
  right: 10px;
}

.createbox {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;

  .createlabel:hover {
    border: 1px solid #082aff;
  }

  .createlabel {
    width: 48%;
    height: 70px;
    display: flex;
    justify-content: space-around;
    padding: 4px;
    box-shadow: 0 0 9.67px 0 rgba(0, 0, 0, 0.16);
    border: 1px solid white;
    margin-bottom: 10px;

    .createlabel-left {
      width: 20%;
      height: 100%;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .createlabel-right {
      width: 75%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
  }
}
</style>
